<template>
  <q-page class="q-pa-md motificationWrapBox" v-loading="loading">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-image src="/svgs/smallBell.svg" style="width: 17px;margin-top: 2px" fit />
        </el-breadcrumb-item>
        <el-breadcrumb-item>消息中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="markContentBox" style="position: relative">
      <div class="contentBox">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabClick">
          <el-tab-pane
            label="全部"
            name="parameter"
            style="overflow: auto"
          >
            <div class="btns">
              <el-button style="background-color: #FFFFFF">标记已读</el-button>
              <el-button style="background-color: #FFFFFF">删除</el-button>
              <el-button style="background-color: #FFFFFF" @click="BatchReading">全部已读</el-button>
              <el-button style="background-color: #FFFFFF" plain>全部删除</el-button>
            </div>
            <el-table
              :data="tableDate.results"
              stripe
              :header-cell-style="{
               background: '#f9f9f9',
               color: '#333',
               fontWeight: '500',
               fontSize: '14px',
               textAlign: 'left',
               height: '56px'
            }"
            >
              <el-table-column type="selection" align="left" width="55" />
              <el-table-column align="left" prop="is_read" label="状态" width="80">
                <template #default="scope">
                  <span>{{ scope.row.is_read?'已读':'未读' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="subject" label="标题内容"></el-table-column>
              <el-table-column align="left" prop="datetime_received" label="时间"></el-table-column>
              <el-table-column align="left" prop="content_brief" label="来源模块"></el-table-column>
            </el-table>

            <div class="row" style="justify-content: flex-end;" v-if="tableDate.results.length>0">
              <el-pagination
                v-if="tableDate.results.length>0"
                background layout="total, prev, pager, next"
                :total="tableDate.count"
                @current-change="changePage"
                style="margin-top: 20px"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="未读"
            name="unRead"
            style="overflow: auto"
          ></el-tab-pane>
          <el-tab-pane
            label="已读"
            name="read"
            style="overflow: auto"
          ></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </q-page>
</template>
<script setup lang="ts">

import {ref,reactive} from "vue";
import {TabsPaneContext} from "element-plus";
import {getEventDataListHandle} from "src/api/model";
import {getMessageList, readOver} from "src/api/user";
import {dataSetStore} from "stores/dataSet";
const pageData =dataSetStore().pageData
const loading = ref(false);

let tableDate = reactive({
  count: 0,
  next: null,
  previous: null,
  results: []
});

const activeName = ref('parameter');
const tabClick = (tab: TabsPaneContext, event: Event) => {
  // alert(1)
  // if (tab.props.label === '事件') {
  //   getEventDataListHandle(projectId, modelId).then((res: any) => {
  //     eventData.value = res.data;
  //   });
  // }
};
getListData();//获取消息列表全部数据
function getListData() {
  loading.value = true;
  getMessageList({page: pageData.page}).then(res => {
    tableDate = res.data;
    loading.value = false;
  })
}
function BatchReading() {
  loading.value = true;
  readOver({page: pageData.page}).then(res => {
    getListData();
    loading.value = false;
  })
}
const changePage = (currentPage: any) => {
  dataSetStore().setPageData(currentPage);
  getListData();
}

</script>
<style scoped lang="scss">
.motificationWrapBox {
  padding: 0 !important;

  .nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    background-color: var(--nav-bg-color);
    height: 46px;

    ::v-deep .el-breadcrumb {
      display: flex;
      align-items: center;
    }
  }
  .markContentBox {
    margin: 0 20px;

    .contentBox {
      padding: 12px;
      background-color: #ffffff !important;
      .btns{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        button{
          background-color: #fff;
        }
      }
    }
  }
}
//去除tab切换的下划线
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__nav-scroll){
  background-color: #fff;
}
:deep(.el-tabs__item){
  margin: 10px;
  padding: 10px!important;
}
:deep(.el-tabs__header){
  margin: 0;
}
:deep(.el-tabs__item.is-active){
  background-color: #EDEFFE;
  color: #3D5CE4;
}
//面包屑斜杆
:deep(.el-breadcrumb__separator){
  font-size: 14px !important;
  color: #c9cdd4 !important;
  margin-top: 2px !important;
}
//面包屑字体颜色
:deep(.el-breadcrumb__inner){
  color: #666 !important;
}
:deep(.el-tabs__active-bar){
  display: none;
}
:deep(.el-breadcrumb__inner.is-link),
.el-breadcrumb__inner a {
  font-weight: normal !important;
}
</style>
